<!--
 * new page
 * @author: YK
 * @since: 2023-11-29
 * index.vue
-->
<template>
<div class="header">
  <span @click="toggle"  >
    <el-icon-expand
      v-if="isCollapse"
      style="margin-right: 10px"
    ></el-icon-expand>
    <el-icon-fold v-else></el-icon-fold>
  </span>
</div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    isCollapse?: boolean;
  }>(),
  {
    isCollapse: false,
  }
);
const emits = defineEmits(["update:isCollapse"]);
const toggle = () => emits("update:isCollapse", !props.isCollapse);
</script>

<style scoped lang="scss" >
.header{
  height:60px;
  padding:0 20px;
  display:flex;
  align-items:center;
}
svg{
  width: 1em;
  height: 1em;
}
</style>
